<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import wsjzglService from '@/api/wsjzgl'
import { useMainStore } from '@/store/main'
import { getFldm } from '@/utils/get-fldm'
import { AjxxGetOutputDTO } from '@/api/wsjzgl-dto'

const store = useMainStore()

// 获取ref
const departForm = ref()

// 入参

// 生命周期

const init = () => {
  // 获取表单数据源（查询2.0表单数据源）
  getFormSjy()
  // 查询表单数据
  queryFormData()
  // 案件类型分类代码
  // 取密级（分类代码）
  getMj()
  // 获取保管期限分类代码
  getBgqx()
  // 获取未成年人封存分类代码
  getWcnrfc()
}

/*
 * 获取密级（分类代码）
 */
const mjList = ref<any>([])
const getMj = async () => {
  mjList.value = await getFldm('gd006')
}
// 获取保管期限分类代码
const bgqxList = ref<any>([])
const getBgqx = async () => {
  bgqxList.value = await getFldm('gd020')
}

// 获取未成年人封存分类代码
const wcnrfcList = ref<any>([])
const getWcnrfc = async () => {
  wcnrfcList.value = await getFldm('gd013')
}

const form = ref<AjxxGetOutputDTO>({
  cbdwmc: '', //单位名称
  cbbmmc: '', //部门名称
  tysah: '', //	统一受案号
  bmsah: '', //部门受案号
  ajlbmc: '', //案件类别名称
  ajmc: '', //正负案卷是案卷名称
  ajly: '', //案件来源是数据来源
  cljg: '', //操作结果
  aymc: '', //案由名称
  slrq: '', //受理日期
  bjrq: '', //办结日期
  cbjcg: '', //检察官
  ajzys: '', //案卷总页数
  mjdm: '', //密级代码
  mjmc: '', //密级名称
  ajbgqxdm: '', //案件保管期限代码
  ajbgqxmc: '', //案件保管期限名称
  wcnrfcdm: '', //未成年封存代码
  wcnrfcmc: '', //未成年封存名称
  sfzzaj: '', //是否纸质案卷(Y: 是 N:否)
  zzajbh: '', //纸质案卷编号
  gdrxm: '', //归档人姓名
  ajdh: '', //档号
  ajcjh: '', //参见号
  jnqksm: '', //卷内情况说明
  wsajbh: '', //文书案卷编号
  dabh: '', //档案编号
})
/*
 * 获取表单数据源（查询2.0表单数据源）
 */
const getFormSjy = () => {
  //
}

/*
 * 查询表单数据
 */
const queryFormData = () => {
  const params = {
    ajbh: store.$state.nodeTreeData?.ajbh || '',
  }
  wsjzglService
    .getAjxx(params)
    .then((res) => {
      form.value = res.data
      departForm.value.clearValidate()
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 未成年人change事件
const wcnrfcChange = (index: number) => {
  form.value.wcnrfcdm = wcnrfcList.value[index].dm
  form.value.wcnrfcmc = wcnrfcList.value[index].mc
}

const bgqxChange = (index: number) => {
  form.value.ajbgqxdm = bgqxList.value[index].dm
  form.value.ajbgqxmc = bgqxList.value[index].mc
}

defineExpose({ init })
</script>
<template>
  <div class="ajxx-container">
    <div class="content-table">
      <!--      
        :rules="form.depart.rules" -->
      <el-form ref="departForm" :model="form" class="demo-ruleForm">
        <table class="form-table">
          <tbody>
            <tr>
              <td class="title">承办单位</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="form.cbdwmc" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                承办部门
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="cbbmmc">
                  <el-input v-model="form.cbbmmc" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">统一受案号</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="form.tysah" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">部门受案号</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="form.bmsah" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">案件类型</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="form.ajlbmc" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                正副案卷
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="ajmc">
                  <el-input v-model="form.ajmc" disabled maxlength="50"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">案件来源</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.ajly" disabled></el-input>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                处理结果
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="cljg">
                  <el-input
                    type="textarea"
                    :row="3"
                    v-model="form.cljg"
                    maxlength="50"
                    disabled
                  ></el-input>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">案由</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.aymc" disabled></el-input>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">受理日期</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-date-picker
                    style="width: 100%"
                    v-model="form.slrq"
                    type="date"
                    placeholder="请选择"
                    size="small"
                    disabled
                  />
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                办结日期
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="bjrq">
                  <el-date-picker
                    disabled
                    style="width: 100%"
                    v-model="form.bjrq"
                    type="date"
                    placeholder="请选择"
                    size="small"
                  />
                  <!-- <el-input v-model="form.bj" maxlength="50" ></el-input> -->
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">检察官</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.cbjcg" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                页数
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="ajzys">
                  <el-input maxlength="50" v-model="form.ajzys" disabled></el-input>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">密级</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-select
                    v-model="form.mjdm"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  >
                    <el-option
                      v-for="zrritem in mjList"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="zrritem.dm"
                    >
                    </el-option>
                  </el-select>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                保管期限
              </td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-select
                    v-model="form.ajbgqxmc"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    @change="bgqxChange"
                    disabled
                  >
                    <el-option
                      v-for="(zrritem, index) in bgqxList"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                  <!-- <el-input maxlength="50"></el-input> -->
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                未成年人封存
              </td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <!-- <el-input maxlength="50"></el-input> -->
                  <el-select
                    v-model="form.wcnrfcmc"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    @change="wcnrfcChange"
                    disabled
                  >
                    <el-option
                      v-for="(zrritem, index) in wcnrfcList"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                纸质案卷
              </td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-select
                    v-model="form.sfzzaj"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    disabled
                  >
                    <el-option label="有" value="Y"> </el-option>
                    <el-option label="无" value="N"> </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">纸质案卷编号</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.zzajbh" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">归档人</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.gdrxm" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">档号</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.ajdh" disabled></el-input>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">参见号</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.ajcjh" disabled></el-input>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">卷内情况说明</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input
                    type="textarea"
                    :row="3"
                    maxlength="50"
                    v-model="form.jnqksm"
                    disabled
                  ></el-input>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ajxx-container {
  width: 100%;
  height: calc(100% - 44px);
  overflow-y: auto;
  .top-button {
    width: 100%;
    text-align: right;
  }

  .content-table {
    padding-bottom: 10px;
  }
}

.form-table {
  width: 100%;
}

.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr td {
  border: 1px solid #dfe8f3;
}
.form-table tbody tr .title {
  padding-right: 10px;
  width: 17%;
  text-align: right;
}
.form-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
}

.show-table {
  width: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
}
.show-table thead tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
  font-weight: bold;
  text-align: center;
  width: 25%;
  font-size: 16px;
}
.show-table tbody tr .title {
  padding-right: 10px;
  text-align: right;
  width: 16%;
}
.show-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}
.btn-div {
  widows: 100%;
  height: 35px;
  padding: 10px 3px;
  text-align: right;
}

.ryList1 {
  margin-top: 10px;
  height: calc(100% - 208px);
}
.ryList2 {
  margin-top: 10px;
  height: calc(100% - 173px);
}

.btn_check {
  margin: 5px;
}
.btn_checked {
  margin: 5px;
}
.header_sq {
  border-bottom: 1px solid #dfe8f3;
  margin-bottom: 10px;
  > div {
    float: right;
    margin-top: 10px;
  }
  p {
    margin-left: 10px;
    line-height: 40px;
    display: inline-block;
    // font-size: $fontsize_default;
    &:before {
      content: '';
      margin-right: 10px;
      vertical-align: middle;
      display: inline-block;
      width: 5px;
      height: 16px;
      background: #4084f0;
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  box-shadow: none;
}
:deep(.el-select__wrapper:hover) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  box-shadow: none;
}
</style>

<style lang="scss">
.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr .text {
  .el-form-item__error {
    position: relative;
  }
}
.form-table tbody tr .text {
  .el-input.is-disabled .el-input__inner[disabled='disabled'] {
    background: #ebeff3;
    color: #cad0d7;
    border: none;
  }
}
.form-table tbody tr .text {
  .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
.show-table tbody tr td {
  .el-input.el-input--suffix > .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
</style>
